<template>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="特别关心患者概览" name="1" class="custom-title">
        <div class="overview">
          <div class="severity">
            <div style="text-align: center;">
              <span style="font-size: 18px;">每日高血压患者病情统计</span>
            </div>
            <div class="severitynumber">
              <div class="all">
                <span>
                  <span style="font-size: 16px;">累计</span>
                  <span style="font-weight: bold;font-size: 40px;">{{ careseveritytotal }}</span>
                  <span style="font-size: 16px; color:#81838F">人次</span>
               </span>
              </div>
              <div class="add">
                <div style="display: flex; justify-content: right;">
                  <span style="font-size: 16px;color:#81838F">一级高血压</span>
                  <span style="font-weight: bold;color: red; font-size: 16px;" class="number">{{ carelevel1 }}</span>
                  <span style="font-size: 16px;color:#81838F">人次</span>
                </div>
                <div style="display: flex; justify-content: right;">
                  <span style="font-size: 16px;color:#81838F">二级高血压</span>
                  <span style="font-weight: bold;color: red; font-size: 16px;" class="number">{{ carelevel2 }}</span>
                  <span style="font-size: 16px;color:#81838F">人次</span>
                </div>
                <div style="display: flex; justify-content: right;">
                  <span style="font-size: 16px;color:#81838F">三级高血压</span>
                  <span style="font-weight: bold;color: red; font-size: 16px;" class="number">{{ carelevel3 }}</span>
                  <span style="font-size: 16px;color:#81838F">人次</span>
                </div>
              </div>
            </div>
            <div class="severitychart_container">
              <div ref="severitychart1" class="severitychart_main"></div>
            </div>
          </div>
          <div class="risk">
            <div style="text-align: center;">
              <span style="font-size: 18px;">每日患者风险情况评估统计</span>
            </div>
            <div class="risknumber">
              <div class="all" style="display: flex; justify-content: left; align-items: center;">
                <span>
                  <span style="font-size: 16px;">累计</span>
                  <span style="font-weight: bold;font-size: 40px;">{{ carerisktotal }}</span>
                  <span style="font-size: 16px; color:#81838F">人次</span>
               </span>
              </div>
              <!-- 增加或减少 -->
              <!-- <div class="add">
                <div style="display: flex; justify-content: right;">
                  <span style="font-size: 16px;color:#81838F">重度增加</span>
                  <span style="font-weight: bold;color: red; font-size: 16px;" class="number">+10</span>
                  <span style="font-size: 16px;color:#81838F">人次</span>
                </div>
                <div style="display: flex; justify-content: right;">
                  <span style="font-size: 16px;color:#81838F">中度增加</span>
                  <span style="font-weight: bold;color: green; font-size: 16px;" class="number">- 23</span>
                  <span style="font-size: 16px;color:#81838F">人次</span>
                </div>
              </div> -->
            </div>
            <div class="riskchart_container">
              <div ref="riskchart1" class="riskchart_main"></div>
            </div>
          </div>
          <div class="diseases">
            <div style="text-align: center;">
              <span style="font-size: 18px;">患者伴发临床疾病统计情况</span>
            </div>
            <div class="diseaseschart_container">
              <div ref="diseaseschart1" class="diseaseschart_main"></div>
            </div>
          </div>
          <div class="age_sex">
            <div style="text-align: center;">
              <span style="font-size: 18px;">患者性别年龄统计情况</span>
            </div>
            <div class="age_sexchart_container">
              <div ref="age_sexchart1" class="age_sexchart_main"></div>
            </div>
          </div>
          <div class="heart_rate">
            <div style="text-align: center;">
              <span style="font-size: 18px;">每日患者心率情况统计</span>
            </div>
            <div class="heart_ratenumber">
              <div class="all" style="display: flex; justify-content: left; align-items: center;">
                <span>
                  <span style="font-size: 16px;">累计</span>
                  <span style="font-weight: bold;font-size: 40px;">{{ careheart_ratetotal }}</span>
                  <span style="font-size: 16px; color:#81838F">人次</span>
               </span>
              </div>
              <!-- <div class="add">
                <div style="display: flex; justify-content: right;">
                  <span style="font-size: 16px;color:#81838F">心率过急增加</span>
                  <span style="font-weight: bold;color: red; font-size: 16px;" class="number">+2</span>
                  <span style="font-size: 16px;color:#81838F">人次</span>
                </div>
                <div style="display: flex; justify-content: right;">
                  <span style="font-size: 16px;color:#81838F">心率过缓增加</span>
                  <span style="font-weight: bold;color: green; font-size: 16px;" class="number">- 2</span>
                  <span style="font-size: 16px;color:#81838F">人次</span>
                </div>
              </div> -->
            </div>
            <div class="heart_ratechart_container">
              <div ref="heart_ratechart1" class="heart_ratechart_main"></div>
            </div>
          </div>
          <div class="illness_history">
            <div style="text-align: center;">
              <span style="font-size: 18px;">患者客观病史情况统计</span>
            </div>
            <div class="illness_historychart">
              <div class="row">
                <div class="illness_historynumber">
                  <span class="label">高血压家族遗传史</span>
                  <span class="value">{{ carefamily}}人</span>
                </div>
                <div>
                  <el-progress :percentage="carefamilyrate" :stroke-width="20" color="#409EFF" text-inside/>
                </div>  
              </div>
              <div class="row">
                <div class="illness_historynumber">
                  <span class="label">吸烟史</span>
                  <span class="value">{{ caresmoke }}人</span>
                </div>
                <div>
                  <el-progress :percentage="caresmokerate" :stroke-width="20" color="#409EFF" text-inside/>
                </div>  
              </div>
              <div class="row">
                <div class="illness_historynumber">
                  <span class="label">饮酒史</span>
                  <span class="value">{{ caredrunk }}人</span>
                </div>
                <div>
                  <el-progress :percentage="caredrunkrate" :stroke-width="20" color="#409EFF" text-inside/>
                </div>  
              </div>
              <div class="row">
                <div class="illness_historynumber">
                  <span class="label">传染病史</span>
                  <span class="value">{{ careinfectious }}人</span>
                </div>
                <div>
                  <el-progress :percentage="careinfectiousrate" :stroke-width="20" color="#409EFF" text-inside/>
                </div>  
              </div>
              <div class="row">
                <div class="illness_historynumber">
                  <span class="label">食物过敏史</span>
                  <span class="value">{{ carefoodallergies}}人</span>
                </div>
                <div>
                  <el-progress :percentage="carefoodallergiesrate" :stroke-width="20" color="#409EFF" text-inside/>
                </div>  
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="患者概览" name="2" class="custom-title" >
        <div class="overview">
          <div class="severity">
            <div style="text-align: center;">
              <span style="font-size: 18px;">每日高血压患者病情统计</span>
            </div>
            <div class="severitynumber">
              <div class="all" style="display: flex; justify-content: left; align-items: center;">
                <span>
                  <span style="font-size: 16px;">累计</span>
                  <span style="font-weight: bold;font-size: 40px;">{{ severitytotal }}</span>
                  <span style="font-size: 16px; color:#81838F">人次</span>
               </span>
              </div>
              <div class="add">
                <div style="display: flex; justify-content: right;">
                  <span style="font-size: 16px;color:#81838F">一级高血压</span>
                  <span style="font-weight: bold;color: red; font-size: 16px;" class="number">{{ level1 }}</span>
                  <span style="font-size: 16px;color:#81838F">人次</span>
                </div>
                <div style="display: flex; justify-content: right;">
                  <span style="font-size: 16px;color:#81838F">二级高血压</span>
                  <span style="font-weight: bold;color: red; font-size: 16px;" class="number">{{ level2 }}</span>
                  <span style="font-size: 16px;color:#81838F">人次</span>
                </div>
                <div style="display: flex; justify-content: right;">
                  <span style="font-size: 16px;color:#81838F">三级高血压</span>
                  <span style="font-weight: bold;color: red; font-size: 16px;" class="number">{{ level3 }}</span>
                  <span style="font-size: 16px;color:#81838F">人次</span>
                </div>
              </div>
            </div>
            <div class="severitychart_container">
              <div ref="severitychart2" class="severitychart_main"></div>
            </div>
          </div>
          <div class="risk">
            <div style="text-align: center;">
              <span style="font-size: 18px;">每日患者风险情况评估统计</span>
            </div>
            <div class="risknumber">
              <div class="all" style="display: flex; justify-content: left; align-items: center;">
                <span>
                  <span style="font-size: 16px;">累计</span>
                  <span style="font-weight: bold;font-size: 40px;">{{ risktotal }}</span>
                  <span style="font-size: 16px; color:#81838F">人次</span>
               </span>
              </div>
              <!-- <div class="add">
                <div style="display: flex; justify-content: right;">
                  <span style="font-size: 16px;color:#81838F">重度增加</span>
                  <span style="font-weight: bold;color: red; font-size: 16px;" class="number">+2</span>
                  <span style="font-size: 16px;color:#81838F">人次</span>
                </div>
                <div style="display: flex; justify-content: right;">
                  <span style="font-size: 16px;color:#81838F">中度增加</span>
                  <span style="font-weight: bold;color: green; font-size: 16px;" class="number">- 2</span>
                  <span style="font-size: 16px;color:#81838F">人次</span>
                </div>
              </div> -->
            </div>
            <div class="riskchart_container">
              <div ref="riskchart2" class="riskchart_main"></div>
            </div>
          </div>
          <div class="diseases">
            <div style="text-align: center;">
              <span style="font-size: 18px;">患者伴发临床疾病统计情况</span>
            </div>
            <div class="diseaseschart_container">
              <div ref="diseaseschart2" class="diseaseschart_main"></div>
            </div>
          </div>
          <div class="age_sex">
            <div style="text-align: center;">
              <span style="font-size: 18px;">患者性别年龄统计情况</span>
            </div>
            <div class="age_sexchart_container">
              <div ref="age_sexchart2" class="age_sexchart_main"></div>
            </div>
          </div>
          <div class="heart_rate">
            <div style="text-align: center;">
              <span style="font-size: 18px;">每日患者心率情况统计</span>
            </div>
            <div class="heart_ratenumber">
              <div class="all" style="display: flex; justify-content: left; align-items: center;">
                <span>
                  <span style="font-size: 16px;">累计</span>
                  <span style="font-weight: bold;font-size: 40px;">{{ heart_ratetotal }}</span>
                  <span style="font-size: 16px; color:#81838F">人次</span>
               </span>
              </div>
              <!-- <div class="add">
                <div style="display: flex; justify-content: right;">
                  <span style="font-size: 16px;color:#81838F">心率过急增加</span>
                  <span style="font-weight: bold;color: red; font-size: 16px;" class="number">+2</span>
                  <span style="font-size: 16px;color:#81838F">人次</span>
                </div>
                <div style="display: flex; justify-content: right;">
                  <span style="font-size: 16px;color:#81838F">心率过缓增加</span>
                  <span style="font-weight: bold;color: green; font-size: 16px;" class="number">- 2</span>
                  <span style="font-size: 16px;color:#81838F">人次</span>
                </div>
              </div> -->
            </div>
            <div class="heart_ratechart_container">
              <div ref="heart_ratechart2" class="heart_ratechart_main"></div>
            </div>
          </div>
          <div class="illness_history">
            <div style="text-align: center;">
              <span style="font-size: 18px;">患者客观病史情况统计</span>
            </div>
            <div class="illness_historychart">
              <div class="row">
                <div class="illness_historynumber">
                  <span class="label">高血压家族遗传史</span>
                  <span class="value">{{ family}}人</span>
                </div>
                <div>
                  <el-progress :percentage="familyrate" :stroke-width="20" color="#409EFF" text-inside/>
                </div>  
              </div>
              <div class="row">
                <div class="illness_historynumber">
                  <span class="label">吸烟史</span>
                  <span class="value">{{ caresmoke }}人</span>
                </div>
                <div>
                  <el-progress :percentage="smokerate" :stroke-width="20" color="#409EFF" text-inside/>
                </div>  
              </div>
              <div class="row">
                <div class="illness_historynumber">
                  <span class="label">饮酒史</span>
                  <span class="value">{{ drunk }}人</span>
                </div>
                <div>
                  <el-progress :percentage="drunkrate" :stroke-width="20" color="#409EFF" text-inside/>
                </div>  
              </div>
              <div class="row">
                <div class="illness_historynumber">
                  <span class="label">传染病史</span>
                  <span class="value">{{ infectious }}人</span>
                </div>
                <div>
                  <el-progress :percentage="infectiousrate" :stroke-width="20" color="#409EFF" text-inside/>
                </div>  
              </div>
              <div class="row">
                <div class="illness_historynumber">
                  <span class="label">食物过敏史</span>
                  <span class="value">{{ foodallergies}}人</span>
                </div>
                <div>
                  <el-progress :percentage="foodallergiesrate" :stroke-width="20" color="#409EFF" text-inside/>
                </div>  
              </div>
            </div>
          </div>
        </div>
        
      </el-collapse-item>
    </el-collapse>
</template>

<script setup lang="ts">
import { onMounted, ref,nextTick } from 'vue';
import * as echarts from 'echarts';
import { useDoctorInfo } from '/@/stores/doctorInfo';
import { persureHeartRatecountsdhcareclassification } from '/@/api/patient_doctor/patient_doctor';
import { pressureAnomaly } from '/@/api/patient_doctor/patient_doctor';
import { carepatientheartRate } from '/@/api/patient_doctor/patient_doctor';
import { carecountcpatientshistory } from '/@/api/patient_doctor/patient_doctor';
import { carecountcpatients } from '/@/api/patient_doctor/patient_doctor';
import { carecountcpatientBase } from '/@/api/patient_doctor/patient_doctor'; 
import { persureHeartRatecountsdhclassification } from '/@/api/patient_doctor/patient_doctor';
import { patientheartRate } from '/@/api/patient_doctor/patient_doctor';
import { countpatientshistory } from '/@/api/patient_doctor/patient_doctor';
import { countpatients } from '/@/api/patient_doctor/patient_doctor';
import { countpatientBase } from '/@/api/patient_doctor/patient_doctor';
import { carepressureAnomaly } from '/@/api/patient_doctor/patient_doctor';

const state = useDoctorInfo();
const Uid = state.doctorBaseInfo.doctorUid;
const activeNames = ref<Array<string | number>>(['1']);


/* 特别关心患者病情统计 */
const careseveritytotal = ref(1);
const carelevel1 = ref(1);
const carelevel2 = ref(1);
const carelevel3 = ref(1);
const severitychart1 = ref(null);
const severitytype1 = ref({
  categories: ['一级高血压', '二级高血压', '三级高血压'],
  data: [
    [20, 30, 50], // 一级高血压对应的低危、中危、高危数据
    [40, 50, 50], // 二级高血压对应的低危、中危、高危数据
    [60, 70, 100] // 三级高血压对应的低危、中危、高危数据
  ]
});
const fetchpersureHeartRatecountsdhcareclassification = async (Uid:string) => {
  try {
    const response = await persureHeartRatecountsdhcareclassification(Uid);
    console.log(response);
    careseveritytotal.value = response.data.累计; 
    carelevel1.value = response.data.一级高血压共;
    carelevel2.value = response.data.二级高血压共;
    carelevel3.value = response.data.三级高血压共;
    severitytype1.value.data[0] = response.data.一级高血压;
    severitytype1.value.data[1] = response.data.二级高血压;
    severitytype1.value.data[2] = response.data.三级高血压;
    if (severitychart1.value) {
    const myChart = echarts.init(severitychart1.value);
    window.addEventListener('resize', function () {
      myChart.resize();
    })
    const option = {
      grid:{
        x:60,//左
        y:50,//上
        x2:30,//右
        y2:30,//下
      },
      tooltip: {},
      legend: {
        data: ['低危', '中危', '高危'],
        top: 5,
        right: 0
      },
      xAxis: {
        data: severitytype1.value.categories,
        axisLabel: {
          interval: 0, // 设置数据间隔
        } 
      },
      yAxis: {},
      series: [
        {
          name: '低危',
          type: 'bar',
          data: severitytype1.value.data.map(item => item[0])
        },
        {
          name: '中危',
          type: 'bar',
          data: severitytype1.value.data.map(item => item[1])
        },
        {
          name: '高危',
          type: 'bar',
          data: severitytype1.value.data.map(item => item[2])
        }
      ]
    };
    myChart.setOption(option);
  }
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};
onMounted(() => {
  fetchpersureHeartRatecountsdhcareclassification(Uid);
});
onActivated(() => {
  fetchpersureHeartRatecountsdhcareclassification(Uid);
});
/* 患者病情统计 */
const severitytotal = ref(1);
const level1 = ref(1);
const level2 = ref(1);
const level3 = ref(1);
const severitychart2 = ref(null);
const severitytype2 = ref({
  categories: ['一级高血压', '二级高血压', '三级高血压'],
  data: [
    [20, 30, 50], // 一级高血压对应的低危、中危、高危数据
    [40, 50, 50], // 二级高血压对应的低危、中危、高危数据
    [60, 70, 100] // 三级高血压对应的低危、中危、高危数据
  ]
});
const fetchpersureHeartRatecountsdhclassification = async (Uid:string) => {
  try {
    const response = await persureHeartRatecountsdhclassification(Uid);
    console.log(response);
    severitytotal.value = response.data.累计; 
    level1.value = response.data.一级高血压共;
    level2.value = response.data.二级高血压共;
    level3.value = response.data.三级高血压共;
    severitytype2.value.data[0] = response.data.一级高血压;
    severitytype2.value.data[1] = response.data.二级高血压;
    severitytype2.value.data[2] = response.data.三级高血压;
    await nextTick();
    if (severitychart2.value) {
    const myChart = echarts.init(severitychart2.value);
    window.addEventListener('resize', function () {
      myChart.resize();
    })
    const option = {
      grid:{
        x:60,//左
        y:50,//上
        x2:30,//右
        y2:30,//下
      },
      tooltip: {},
      legend: {
        data: ['低危', '中危', '高危'],
        top: 5,
        right: 0
      },
      xAxis: {
        data: severitytype2.value.categories,
        axisLabel: {
          interval: 0, // 设置数据间隔
        } 
      },
      yAxis: {},
      series: [
        {
          name: '低危',
          type: 'bar',
          data: severitytype2.value.data.map(item => item[0])
        },
        {
          name: '中危',
          type: 'bar',
          data: severitytype2.value.data.map(item => item[1])
        },
        {
          name: '高危',
          type: 'bar',
          data: severitytype2.value.data.map(item => item[2])
        }
      ]
    };
    myChart.setOption(option);
  }
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};
onMounted(() => {
  watch(activeNames, (newActiveNames) => {
    if (newActiveNames.includes('2')) {
      fetchpersureHeartRatecountsdhclassification(Uid);
    }
  });
});
onActivated(() => {
  watch(activeNames, (newActiveNames) => {
    if (newActiveNames.includes('2')) {
      fetchpersureHeartRatecountsdhclassification(Uid);
    }
  });
});

/* 特别关心患者风险评估 */
const carerisktotal = ref(1);
const riskchart1 = ref(null);
const risktype1 = ref({
  categories: ['重度', '中度', '轻度','正常偏高', '正常', '偏低'],
  data: [100, 140, 230, 100, 130,100]
});
const fetchcarepressureAnomaly = async (Uid:string) => {
  try {
    const response = await carepressureAnomaly(Uid);
    console.log(response);
    carerisktotal.value = response.data.累计人次;
    risktype1.value.data[0] = response.data.重度;
    risktype1.value.data[1] = response.data.中度;
    risktype1.value.data[2] = response.data.轻度;
    risktype1.value.data[3] = response.data.正常偏高;
    risktype1.value.data[4] = response.data.正常;
    risktype1.value.data[5] = response.data.偏低;
    console.log(risktype1.value);
    if (riskchart1.value) {
    const myChart = echarts.init(riskchart1.value);
    window.addEventListener('resize', function () {
      myChart.resize();
    })
    const option = {
      grid:{
        x:30,//左
        y:60,//上
        x2:15,//右
        y2:20,//下
      },
      tooltip: {},
      xAxis: {
        data: risktype1.value.categories, 
        axisLabel: {
        interval: 0,    
      }
      },
      yAxis: {},
      series: [{
        type: 'bar',
        data: risktype1.value.data 
      }]
    };
    myChart.setOption(option);
  }

  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};
onMounted(() => {
  fetchcarepressureAnomaly(Uid);
})
onActivated(() => {
  fetchcarepressureAnomaly(Uid);
});
/* 患者风险评估 */
const risktotal = ref(1);
const riskchart2 = ref(null);
const risktype2 = ref({
  categories: ['重度', '中度', '轻度','正常偏高', '正常', '偏低'],
  data: [100, 140, 230, 100, 130,100]
});
const fetchpressureAnomaly = async (Uid:string) => {
  try {
    const response = await pressureAnomaly(Uid);
    console.log(response);
    risktotal.value = response.data.累计人次;
    risktype2.value.data[0] = response.data.重度;
    risktype2.value.data[1] = response.data.中度;
    risktype2.value.data[2] = response.data.轻度;
    risktype2.value.data[3] = response.data.正常偏高;
    risktype2.value.data[4] = response.data.正常;
    risktype2.value.data[5] = response.data.偏低;
    console.log(risktype2.value);
    if (riskchart2.value) {
    const myChart = echarts.init(riskchart2.value);
    window.addEventListener('resize', function () {
      myChart.resize();
    })
    const option = {
      grid:{
        x:30,//左
        y:60,//上
        x2:15,//右
        y2:20,//下
      },
      tooltip: {},
      xAxis: {
        data: risktype2.value.categories, 
        axisLabel: {
        interval: 0,    
      }
      },
      yAxis: {},
      series: [{
        type: 'bar',
        data: risktype2.value.data 
      }]
    };
    myChart.setOption(option);
  }

  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};
onMounted(() => {
  watch(activeNames, (newActiveNames) => {
    if (newActiveNames.includes('2')) {
      fetchpressureAnomaly(Uid);
    }
  });
})
onActivated(() => {
  watch(activeNames, (newActiveNames) => {
    if (newActiveNames.includes('2')) {
      fetchpressureAnomaly(Uid);
    }
  });
});

/* 特别关心患者心率 */
const careheart_ratetotal = ref(1);
const heart_ratechart1 = ref(null);
const heart_ratetype = ref({
  categories: ['过缓', '正常', '过急'],
  data: [100, 140, 230]
});
const fetchcarepatientheartRate = async (Uid:string) => {
  try {
    const response = await carepatientheartRate(Uid);
    console.log(response);
    careheart_ratetotal.value = response.data.累计;
    heart_ratetype.value.data[0] = response.data.过缓;
    heart_ratetype.value.data[1] = response.data.正常;
    heart_ratetype.value.data[2] = response.data.过急;
    if (heart_ratechart1.value) {
    const myChart = echarts.init(heart_ratechart1.value);
    window.addEventListener('resize', function () {
      myChart.resize();
    })
    const option = {
      grid:{
        x:35,//左
        y:50,//上
        x2:10,//右
        y2:30,//下
      },
      tooltip: {},
      xAxis: {
        data: heart_ratetype.value.categories 
      },
      yAxis: {},
      series: [{
        type: 'bar',
        data: heart_ratetype.value.data 
      }]
    };
    myChart.setOption(option);
  }
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};
onMounted(() => {
  fetchcarepatientheartRate(Uid);
})
onActivated(() => {
  fetchcarepatientheartRate(Uid);
});

/* 患者心率 */
const heart_ratetotal = ref(1);
const heart_ratechart2 = ref(null);
const heart_ratetype2 = ref({
  categories: ['过缓', '正常', '过急'],
  data: [10, 10, 2]
});
const fetchpatientheartRate = async (Uid:string) => {
  try {
    const response = await patientheartRate(Uid);
    console.log(response);
    heart_ratetotal.value = response.data.累计;
    heart_ratetype2.value.data[0] = response.data.过缓;
    heart_ratetype2.value.data[1] = response.data.正常;
    heart_ratetype2.value.data[2] = response.data.过急;
    if (heart_ratechart2.value) {
    const myChart = echarts.init(heart_ratechart2.value);
    window.addEventListener('resize', function () {
      myChart.resize();
    })
    const option = {
      grid:{
        x:35,//左
        y:50,//上
        x2:10,//右
        y2:30,//下
      },
      tooltip: {},
      xAxis: {
        data: heart_ratetype2.value.categories 
      },
      yAxis: {},
      series: [{
        type: 'bar',
        data: heart_ratetype2.value.data 
      }]
    };
    myChart.setOption(option);
  }
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};
onMounted(() => {
  watch(activeNames, (newActiveNames) => {
    if (newActiveNames.includes('2')) {
      fetchpatientheartRate(Uid);
    }
  });
})
onActivated(() => {
  watch(activeNames, (newActiveNames) => {
    if (newActiveNames.includes('2')) {
      fetchpatientheartRate(Uid);
    }
  });
});

/* 特别关心患者遗传病史 */
const carefamily = ref(0);
const caresmoke = ref(0);
const caredrunk = ref(0);
const carefoodallergies = ref(0);
const careinfectious = ref(0);
const carefamilyrate = ref(0);
const caredrunkrate = ref(0);
const carefoodallergiesrate = ref(0);
const caresmokerate = ref(0);
const careinfectiousrate = ref(0);
const fetchcarecountcpatientshistory = async (Uid:string) => {
  try {
    const response = await carecountcpatientshistory(Uid);
    console.log(response);
    carefamily.value = response.data.高血压家族遗传史;
    carefamilyrate.value = parseInt(response.data.高血压家族遗传史比例,10);
    caresmoke.value = response.data.吸烟史;
    caresmokerate.value = parseInt(response.data.吸烟史比例,10);
    caredrunk.value = response.data.饮酒史;
    caredrunkrate.value = parseInt(response.data.饮酒史比例,10);
    carefoodallergies.value = response.data.食物过敏史;
    carefoodallergiesrate.value = parseInt(response.data.食物过敏史比例,10);
    careinfectious.value = response.data.传染病史;
    careinfectiousrate.value = parseInt(response.data.传染病史比例,10);
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};
onMounted(() => {
  fetchcarecountcpatientshistory(Uid);
})
onActivated(() => {
  fetchcarecountcpatientshistory(Uid);
});
/* 患者遗传病史 */
const family = ref(0);
const smoke = ref(0);
const drunk = ref(0);
const foodallergies = ref(0);
const infectious = ref(0);
const familyrate = ref(0);
const drunkrate = ref(0);
const foodallergiesrate = ref(0);
const smokerate = ref(0);
const infectiousrate = ref(0);
const fetchcountpatientshistory = async (Uid:string) => {
  try {
    const response = await countpatientshistory(Uid);
    console.log(response);
    family.value = response.data.高血压家族遗传史;
    familyrate.value = parseInt(response.data.高血压家族遗传史比例,10);
    smoke.value = response.data.吸烟史;
    smokerate.value = parseInt(response.data.吸烟史比例,10);
    drunk.value = response.data.饮酒史;
    drunkrate.value = parseInt(response.data.饮酒史比例,10);
    foodallergies.value = response.data.食物过敏史;
    foodallergiesrate.value = parseInt(response.data.食物过敏史比例,10);
    infectious.value = response.data.传染病史;
    infectiousrate.value = parseInt(response.data.传染病史比例, 10);
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};
onMounted(() => {
  fetchcountpatientshistory(Uid);
})
onActivated(() => {
  fetchcountpatientshistory(Uid);
});

/* 特别关心患者伴发临床疾病 */
const diseaseschart1 = ref(null);
const diseasestype1 = ref({
  糖尿病: 172,
  视网膜病变: 145,
  周围血管病: 180,
  肾脏疾病: 199,
  脑血管病: 0,
  血脂异常: 100,
  其他: 124
});
const fetchcarecountcpatients = async (Uid:string) => {
  try {
    const response = await carecountcpatients(Uid);
    console.log(response);
    diseasestype1.value.糖尿病 = response.data.糖尿病;
    diseasestype1.value.视网膜病变 = response.data.视网膜病变;
    diseasestype1.value.周围血管病 = response.data.周围血管病;
    diseasestype1.value.肾脏疾病 = response.data.肾脏疾病;
    diseasestype1.value.脑血管病= response.data.脑血管病;
    diseasestype1.value.血脂异常 = response.data.血脂异常;
    diseasestype1.value.其他 = response.data.其他;
    /* console.log(diseasestype1.value); */
    if (diseaseschart1.value) {
    const myChart = echarts.init(diseaseschart1.value);
    window.addEventListener('resize', function () {
      myChart.resize();
    })
    const option = {
      grid:{
        x:250,//左
        y:250,//上
        x2:250,//右
        y2:250,//下
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)' 
      },
      series: [
        {
          type: 'pie',
          data: [
            {
              value: diseasestype1.value.糖尿病,
              name: '糖尿病',
              itemStyle: {
                color: '#D95040',
              },
            },
            {
              value: diseasestype1.value.视网膜病变,
              name: '视网膜病变',
              itemStyle: {
                color: '#EE752F',
              },
            },
            {
              value: diseasestype1.value.周围血管病,
              name: '周围血管病',
              itemStyle: {
                color: '#F2BD42',
              },
            },
            {
              value: diseasestype1.value.肾脏疾病,
              name: '肾脏疾病',
              itemStyle: {
                color: '#58A55C',
              },
            },
            {
              value: diseasestype1.value.脑血管病,
              name: '脑血管病',
              itemStyle: {
                color: '#68BBC4',
              },
            },
            {
              value: diseasestype1.value.血脂异常,
              name: '血脂异常',
              itemStyle: {
                color: '#5087EC',
              },
            },
            {
              value: diseasestype1.value.其他,
              name: '其他',
              itemStyle: {
                color: '#B886ED',
              },
            },
          ],
          radius: ['65%', '80%'],
          label: {
            show: false // 隐藏标签
          }
        },
      ],
    };

    myChart.setOption(option);

  }
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};
onMounted(() => {
  fetchcarecountcpatients(Uid);
})
onActivated(() => {
  fetchcarecountcpatients(Uid);
});


/* 患者伴发临床疾病 */
const diseaseschart2 = ref(null);
const diseasestype2 = ref({
  糖尿病: 172,
  视网膜病变: 145,
  周围血管病: 180,
  肾脏疾病: 199,
  脑血管病: 0,
  血脂异常: 100,
  其他: 124
});
const fetchcountpatients = async (Uid:string) => {
  try {
    const response = await countpatients(Uid);
    /* console.log(response);console.log(response); */
    diseasestype2.value.糖尿病 = response.data.糖尿病;
    diseasestype2.value.视网膜病变 = response.data.视网膜病变;
    diseasestype2.value.周围血管病 = response.data.周围血管病;
    diseasestype2.value.肾脏疾病 = response.data.肾脏疾病;
    diseasestype2.value.脑血管病 = response.data.脑血管病;
    diseasestype2.value.血脂异常 = response.data.血脂异常;
    diseasestype2.value.其他 = response.data.其他;
    if (diseaseschart2.value) {
    const myChart = echarts.init(diseaseschart2.value);
    window.addEventListener('resize', function () {
      myChart.resize();
    })
    const option = {
      grid:{
        x:250,//左
        y:250,//上
        x2:250,//右
        y2:250,//下
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)' 
      },
      series: [
        {
          type: 'pie',
          data: [
            {
              value: diseasestype2.value.糖尿病,
              name: '糖尿病',
              itemStyle: {
                color: '#D95040',
              },
            },
            {
              value: diseasestype2.value.视网膜病变,
              name: '视网膜病变',
              itemStyle: {
                color: '#EE752F',
              },
            },
            {
              value: diseasestype2.value.周围血管病,
              name: '周围血管病',
              itemStyle: {
                color: '#F2BD42',
              },
            },
            {
              value: diseasestype2.value.肾脏疾病,
              name: '肾脏疾病',
              itemStyle: {
                color: '#58A55C',
              },
            },
            {
              value: diseasestype2.value.脑血管病,
              name: '脑血管病',
              itemStyle: {
                color: '#68BBC4',
              },
            },
            {
              value: diseasestype2.value.血脂异常,
              name: '血脂异常',
              itemStyle: {
                color: '#5087EC',
              },
            },
            {
              value: diseasestype2.value.其他,
              name: '其他',
              itemStyle: {
                color: '#B886ED',
              },
            },
          ],
          radius: ['65%', '80%'],
          label: {
            show: false // 隐藏标签
          }
        },
      ],
    };

    myChart.setOption(option);

  }
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};
onMounted(() => {
  watch(activeNames, (newActiveNames) => {
    if (newActiveNames.includes('2')) {
      fetchcountpatients(Uid);
    }
  });
})
onActivated(() => {
  watch(activeNames, (newActiveNames) => {
    if (newActiveNames.includes('2')) {
      fetchcountpatients(Uid);
    }
  });
});




/* 特别关心患者性别年龄统计 */
const age_sexchart1 = ref(null);
const age_sextype1 = ref({
  female1: 172,
  female2: 145,
  male1: 180,
  male2: 199
});
const fetchcarecountcpatientBase = async (Uid:string) => {
  try {
    const response = await carecountcpatientBase(Uid);
    console.log(response);
    age_sextype1.value.female1 = response.data.female1;
    age_sextype1.value.female2 = response.data.female2;
    age_sextype1.value.male1 = response.data.male1;
    age_sextype1.value.male2 = response.data.male2;
    if (age_sexchart1.value) {
    const myChart = echarts.init(age_sexchart1.value);
    window.addEventListener('resize', function () {
      myChart.resize();
    })
    const option = {
      grid:{
        x:250,//左
        y:250,//上
        x2:250,//右
        y2:250,//下
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)' // 修改为仅显示框中内容
      },
      series: [
        {
          type: 'pie',
          data: [
            {
              value: age_sextype1.value.female1,
              name: '女 >66',
              itemStyle: {
                color: '#F1C226',
              },
            },
            {
              value: age_sextype1.value.female2,
              name: '女 <65',
              itemStyle: {
                color: '#76A0D4',
              },
            },
            {
              value: age_sextype1.value. male1,
              name: '男 >56',
              itemStyle: {
                color: '#E7A029',
              },
            },
            {
              value: age_sextype1.value. male2,
              name: '男 <55',
              itemStyle: {
                color: '#F27E10',
              },
            },
          ],
          radius: ['65%', '80%'],
          label: {
            show: false 
          }
        },
      ],
    };

    myChart.setOption(option);

  }
    
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};
onMounted(() => {
  fetchcarecountcpatientBase(Uid);
})
onActivated(() => {
  fetchcarecountcpatientBase(Uid);
});


/* 患者性别年龄统计 */
const age_sexchart2 = ref(null);
const age_sextype2 = ref({
  female1: 172,
  female2: 145,
  male1: 180,
  male2: 199
});
const fetchcountpatientBase = async (Uid:string) => {
  try {
    const response = await countpatientBase(Uid);
    console.log(response);
    age_sextype2.value.female1 = response.data.female1;
    age_sextype2.value.female2 = response.data.female2;
    age_sextype2.value.male1 = response.data.male1;
    age_sextype2.value.male2 = response.data.male2;
    if (age_sexchart2.value) {
    const myChart = echarts.init(age_sexchart2.value);
    window.addEventListener('resize', function () {
      myChart.resize();
    })
    const option = {
      grid:{
        x:250,//左
        y:250,//上
        x2:250,//右
        y2:250,//下
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)' // 修改为仅显示框中内容
      },
      series: [
        {
          type: 'pie',
          data: [
            {
              value: age_sextype2.value.female1,
              name: '女 >66',
              itemStyle: {
                color: '#F1C226',
              },
            },
            {
              value: age_sextype2.value.female1,
              name: '女 <65',
              itemStyle: {
                color: '#76A0D4',
              },
            },
            {
              value: age_sextype2.value. male1,
              name: '男 >56',
              itemStyle: {
                color: '#E7A029',
              },
            },
            {
              value: age_sextype2.value. male2,
              name: '男 <55',
              itemStyle: {
                color: '#F27E10',
              },
            },
          ],
          radius: ['65%', '80%'],
          label: {
            show: false 
          }
        },
      ],
    };

    myChart.setOption(option);

  }
    
  } catch (error) {
    console.error('Error fetching patient count:', error);
  }
};
onMounted(() => {
  watch(activeNames, (newActiveNames) => {
    if (newActiveNames.includes('2')) {
      fetchcountpatientBase(Uid);
    }
  });
})
onActivated(() => {
  watch(activeNames, (newActiveNames) => {
    if (newActiveNames.includes('2')) {
      fetchcountpatientBase(Uid);
    }
  });
});





</script>

<style lang="scss" scoped>

.overview {
  display: flex;
  flex-wrap: wrap;
}

.severity,
.risk,
.heart_rate,
.illness_history
{
  margin-top: 30px;
  margin-left: 25px;
  flex-basis: 47%;
  height: 400px;
  padding: 10px;
  border-radius: 8px;
  background: rgb(246,249,251);
}

.diseases,
.age_sex{
  margin-top: 30px;
  margin-left: 25px;
  flex-basis: 47%;
  height: 300px;
  padding: 10px;
  border-radius: 8px;
  background: rgb(246,249,251);
}

.illness_historychart{
  margin-top: 20px;
  margin-left: 0px;
}

.severitynumber,
.risknumber,
.heart_ratenumber{
  display: flex;
  justify-content: space-between; 
}

.all, .add {
  width: 50%; 
}

.severitychart_main,
.riskchart_main,
.diseaseschart_main,
.age_sexchart_main,
.heart_ratechart_main{
  width:100%;
  height:100%;
}

.severitychart_container,
.riskchart_container,
.heart_ratechart_container{
  width:100%;
  height:70%;
  display: flex;
  justify-content: center;
}

.diseaseschart_container,
.age_sexchart_container{
  width:100%;
  height:90%;
  display: flex;
  justify-content: center;
}




.row{
  margin-top: 10px;
}

.value{
  margin-left: 10px;
}

.label,
.value{
  font-size: 16px;
}

.number{
  margin-left: 5px; 
  margin-right:5px;
}
</style>


